<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20">
      <template #left></template>
      <template #right>
        <a-button type="primary" @click="add">新增类型</a-button>
      </template>
    </ConditionBox>
    <!-- <a-divider /> -->
    <table-turn :table-data="getTableData" ref="tableRef">
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="typeName" title="分类名称">
      </a-table-column>
      <a-table-column
        :width="200"
        data-index="matchValueType"
        title="匹配值类型"
      >
      </a-table-column>
      <a-table-column
        :width="120"
        data-index=""
        title="操作"
        fixed="right"
        align="center"
      >
        <template #cell="{ record }">
          <a-tooltip content="编辑">
            <IconFont
              type="icon-edit"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer'
              }"
              @click="goEdit(record)"
            />
          </a-tooltip>
          <a-tooltip content="删除" position="left">
            <a-popconfirm content="是否确认删除该条数据?" @ok="del(record.id)">
              <icon-font
                type="icon-delete"
                :size="26"
                :style="{
                  cursor: 'pointer',
                  marginRight: '10px'
                }"
              />
            </a-popconfirm>
          </a-tooltip>
        </template>
      </a-table-column>
    </table-turn>
  </ContentCard>
  <ConditionDetails
    v-model:visible="modalVisible"
    @save="saveConditionType"
    :data="currData"
  ></ConditionDetails>
</template>

<script lang="ts" setup>
import {
  getFlowConditionTypeAll,
  getFlowConditionTypeList,
  conditionTypeCheck,
  addApprovalConditionType,
  editApprovalConditionType,
  delFlowConditionTypeByIds
} from '@/apis/approve/index';
import type { ConditionType } from '@/apis/approve/type';
import { Message } from '@arco-design/web-vue';
import ConditionDetails from './components/ConditionDetails/index.vue';
import { cloneDeep } from 'lodash';
const router = useRouter();
const title = '条件类型';

const breadCrumb: string[] = ['审批', '条件类型'];

const params = reactive({ pageNumber: 0, pageSize: 10 });

let modalVisible = ref(false); // 判断新增弹出框是否打开

// 新增异动事件
const add = () => {
  currData.value = {
    typeName: '', // 分类名称
    matchValueType: 'text' // 匹配值类型
  };
  modalVisible.value = true;
};

const tableRef = ref(); // 表格的ref
let currData = ref<ConditionType>({}); // 储存当前选中数据
// 获取表格数据
const getTableData = async () => {
  try {
    const res = await getFlowConditionTypeList(params);
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

const goEdit = (record: ConditionType) => {
  currData.value = cloneDeep(record);
  modalVisible.value = true;
};

// 删除某一行
const del = async (id: number) => {
  try {
    await delFlowConditionTypeByIds({ ids: [id] });
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 新增弹出框返回的
const saveConditionType = async () => {
  try {
    // 编辑
    if (currData.value.id) {
      await editApprovalConditionType(currData.value);
    }
    // 新增
    else await addApprovalConditionType(currData.value);
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

const refresh = () => {
  tableRef.value.loadData();
};
</script>

<style scoped lang="less"></style>
